import React, { useEffect, useRef, useState } from 'react';
import { Form, Input, Modal, Select, Row, Col, DatePicker } from 'antd';
import { adminCompanyType, adminPriceType } from '@/utils/constant';
import { useRequest } from '@umijs/hooks';
import { apiPurchaseGetList, apiOrderGetList } from '@/services/otherServices';
import moment from 'moment';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const [searchValue, setSearchValue] = useState('');
  const [data, setData] = useState([]);
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  const { loading: getListLoading, run } = useRequest(apiOrderGetList, {
    manual: true,
    throttleInterval: 500,
    onSuccess: (res, params) => {
      setData(res.data);
    },
  });

  const onValuesChange = (changedValues: any, allValues: any) => {
    if (changedValues.productCompany) {
      form.setFieldsValue({
        orderNo: undefined,
      });
      run({
        productCompany: changedValues.productCompany,
        pageNo: 1,
        pageSize: 10,
      });
    }
    if (changedValues.orderNo) {
      const result: any = data.filter(
        (n: any) => n.orderNo === changedValues.orderNo,
      );
      delete result[0].remark;
      form.setFieldsValue({
        ...result[0],
        shippingDate: moment(result[0].shippingDate),
      });
    }
  };
  useEffect(() => {
    run({
      orderNo: searchValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchValue]);

  useEffect(() => {
    run({
      pageNo: 1,
      pageSize: 10,
    });
    getForm(form);
  }, []);
  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
      width={1024}
    >
      <Form
        hideRequiredMark
        style={{ marginTop: 8 }}
        form={form}
        name="basic"
        onValuesChange={onValuesChange}
      >
        <Row gutter={12}>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请选择分公司' }]}
              label={'分公司'}
              name="productCompany"
            >
              <Select>
                {adminCompanyType.map(item => (
                  <Select.Option key={item.value} value={item.value}>
                    {item.label}
                  </Select.Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择订单号' }]}
              {...formItemLayout}
              label={'订单号'}
              name="orderNo"
            >
              <Select
                showSearch
                onSearch={value => {
                  setSearchValue(value);
                }}
                filterOption={false}
                placeholder="选择父采购单"
              >
                {data &&
                  data.map((item: any) => (
                    <Select.Option key={item.id} value={item.orderNo}>
                      {item.orderNo}
                    </Select.Option>
                  ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择送货日期' }]}
              {...formItemLayout}
              label={'送货日期'}
              name="shippingDate"
            >
              <DatePicker style={{ width: '100%' }} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'客户单位'}
              rules={[{ required: true, message: '请输入客户单位' }]}
              name="customerCompany"
            >
              <Input disabled={true} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label={'品名'} name="productName">
              <Input disabled={true} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label={'颜色'} name="color">
              <Input disabled={true} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label={'属性'} name="attribute">
              <Input disabled={true} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label={'等级'} name="grade">
              <Input disabled={true} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入规格' }]}
              {...formItemLayout}
              label={'规格'}
              name="spec"
            >
              <Input disabled />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem style={{ margin: 0 }} {...formItemLayout} label={'单价'}>
              <Input.Group compact>
                <FormItem
                  rules={[{ required: true, message: '请选择单价类型' }]}
                  style={{ width: '40%' }}
                  name="priceType"
                >
                  <Select disabled style={{ width: '100%' }}>
                    {adminPriceType.map(item => (
                      <Select.Option key={item.value} value={item.value}>
                        {item.label}
                      </Select.Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem
                  rules={[{ required: true, message: '请输入价格' }]}
                  style={{ width: '60%' }}
                  name={'price'}
                >
                  <Input disabled placeholder={'价格'} />
                </FormItem>
              </Input.Group>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请输入数量' }]}
              label={'数量'}
              name="amount"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'送货单号'}
              rules={[{ required: true, message: '请输入送货单号' }]}
              name="deliveryNo"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'物料编号'}
              rules={[{ required: false, message: '请输入物料编号' }]}
              name="materialNo"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'采购单号'}
              rules={[{ required: false, message: '请输入采购单号' }]}
              name="purchaseNo"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'车牌'}
              rules={[{ required: true, message: '请输入车牌' }]}
              name="licensePlate"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label={'备注'} name="remark">
              <Input.TextArea rows={4} />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Detail;
